import {Table, TableColumnsType} from "antd";
import {createStyles} from 'antd-style';
import {useEffect, useState} from "react";
import './index.less'
import useAppState from "../../store";

const useStyle = createStyles(({css, token}) => {
    const {antCls} = token;
    return {
        customTable: css`
            ${antCls}-table {
                ${antCls}-table-container {
                    ${antCls}-table-body,
                    ${antCls}-table-content {
                        scrollbar-width: thin;
                        scrollbar-color: #eaeaea transparent;
                        scrollbar-gutter: stable;
                    }
                }
            }
        `,
    };
});

const SimilarTable = () => {
    const {graphData,triggerType,triggerId,similarTableData,setSimilarTableData} = useAppState();
    const [height, setHeight] = useState(0);
    const [columns,setColumns] = useState<any[]>([]);
    const [dataSource,setDataSource] = useState<any[]>([]);
    const handleChange=(pagination, filters, sorter)=>{
        // 执行排序
        if (sorter.order) {
            const sorted = [...dataSource].sort((a, b) => {
                const modifier = sorter.order === 'ascend' ? 1 : -1;
                return (a[sorter.field] - b[sorter.field]) * modifier;
            });
            setSimilarTableData(sorted);
        } else {
            setSimilarTableData(dataSource);
        }
    }
    useEffect(() => {
        const newHeight = document.getElementById('SimilarTable')?.offsetHeight;
        setHeight(newHeight);
    }, []);
    const fixColumns = ["ChemicalFormula", "Tensile_Strength", "Yield_Strength"];
    const filterColumns=["ChemicalFormula", "Tensile_Strength", "Yield_Strength","id","NewNode","feature_vector"];//包含固定列+节点数据中不需要展示的字段
    useEffect(() => {
        if(graphData.nodes.length===0) return;
        const tempColumns:any = [
            {
                title: fixColumns[0],
                width: 155,
                dataIndex: fixColumns[0],
                key: fixColumns[0],
                fixed: 'left',
            },
            {
                title: fixColumns[1],
                width: 155,
                dataIndex: fixColumns[1],
                key: fixColumns[1],
                fixed: 'left',
                sorter:(a,b)=>a.Tensile_Strength-b.Tensile_Strength
            },
            {
                title: fixColumns[2],
                width: 155,
                dataIndex: fixColumns[2],
                key: fixColumns[2],
                fixed: 'left',
                sorter:(a,b)=>a.Yield_Strength-b.Yield_Strength
            },
        ];
        Object.entries(graphData.nodes[0].data).forEach(([key, value]) => {
            if(!filterColumns.includes(key)) {
                tempColumns.push(
                    {
                        title: key,
                        width: 155,
                        dataIndex: key,
                        key: key
                    }
                )
            }
        })
        setColumns(tempColumns);
    }, [graphData]);
    useEffect(() => {
        if(triggerType==='node'){
            const nodesData=[];
            for(let i=0;i<graphData.nodes.length;i++){
                if(graphData.nodes[i].id===triggerId) {
                    nodesData.push(graphData.nodes[i].data)
                    break;
                }
            }
            for(let i=0;i<graphData.edges.length;i++)
            {
                    if(triggerId===graphData.edges[i].source){
                        for(let j=0;j<graphData.nodes.length;j++)
                        {
                            if(graphData.nodes[j].id===graphData.edges[i].target)
                            {
                                nodesData.push(graphData.nodes[j].data)
                                break;
                            }
                        }
                    }else if(triggerId===graphData.edges[i].target){
                        for(let j=0;j<graphData.nodes.length;j++)
                        {
                            if(graphData.nodes[j].id===graphData.edges[i].source)
                            {
                                nodesData.push(graphData.nodes[j].data)
                                break;
                            }
                        }
                    }
            }
            setSimilarTableData(nodesData);
            console.log(nodesData,'3333');
        }else if(triggerType==='edge'){
            const nodesData=[];
            for(let i=0;i<graphData.edges.length;i++){
                if(graphData.edges[i].id===triggerId) {
                    for(let j=0;j<graphData.nodes.length;j++){
                        if(nodesData.length==2) break;
                        else if(graphData.edges[i].target===graphData.nodes[j].id || graphData.edges[i].source===graphData.nodes[j].id){
                            nodesData.push(graphData.nodes[j].data)
                        }
                    }
                    break;
                }
            }
            setSimilarTableData(nodesData);
        }else if(triggerType==="") setSimilarTableData([]);
        console.log(triggerType,"触发时机");
    }, [triggerType,triggerId]);
    useEffect(() => {
        setDataSource(similarTableData);
    }, [similarTableData]);
    const {styles} = useStyle();
    const headHeight = 120;//表头高度
    const getRowClassName = (record) => {
        return record.id === triggerId ? 'click-row' : '';
    };
    return (
        <>
            <div id={"SimilarTable"}>
                <Table
                    className={styles.customTable}
                    columns={columns}
                    dataSource={dataSource}
                    rowClassName={getRowClassName}
                    onChange={handleChange}
                    scroll={{x: 'max-content', y: height - headHeight}}
                    showSorterTooltip={{ target: 'sorter-icon' }}
                    pagination={{pageSize: 10000, simple: true, disabled: true, hideOnSinglePage: true}}
                />
            </div>
        </>
    )
}
export default SimilarTable;
